import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import classNames from 'classnames'

import SearchList from '@/components/search-list/search-list'

import { searchHot } from '@/api'
import { HTTP_OK } from '@/config'

import './search.scss'

// 搜索页面

class Search extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: '',
      query: '', //搜索关键字
      type: 1, //搜索类型
      hots: [] //热搜
    }
    searchHot().then(res => {
      if (res.data.code === HTTP_OK) {
        this.setState({
          hots: res.data.result.hots
        })
      }
    })
  }

  searchChange = e => {
    this.setState({
      value: e.target.value
    })
  }

  onEnter = e => {
    if (e.keyCode === 13) {
      this.setState({
        query: e.target.value
      })
    }
  }

  render() {
    const { value, query, hots } = this.state
    const { history } = this.props
    return (
      <div className="mm-wrapper search">
        <nav className="search-head">
          <div className="search-head-left" onClick={history.goBack} />
          <div className="search-head-box">
            <input
              className="search-head-input"
              type="text"
              placeholder="搜索你喜欢的"
              value={value}
              autoFocus="autofocus"
              onChange={this.searchChange}
              onKeyDown={this.onEnter}
            />
          </div>
        </nav>
        <div className="mm-wrapper">
          <SearchList query={query} />
          <div className={classNames('search-hots', { 'mm-none': query })}>
            <h1>热门搜索</h1>
            <ul>
              {hots.length > 0 &&
                hots.map((itme, index) => (
                  <li
                    className="search-hots-item"
                    onClick={() => {
                      this.setState({ query: itme.first, value: itme.first })
                    }}
                    key={index}
                  >
                    {itme.first}
                  </li>
                ))}
            </ul>
          </div>
        </div>
      </div>
    )
  }
}

export default withRouter(Search)
